{include file="public/header" /}
<!--<style>-->
<!--    input[type=checkbox], input[type=radio] {-->
<!--        display: block !important;-->
<!--    }-->
<!--</style>-->
<body>
<div class="header">购物车 <p class="edit" style="font-size: .9rem">编辑</p></div>
<div class="layui-form" lay-filter="cartForm">
    <ul class="cart-list">
        {foreach name="list" item="vo"}
        <li class="item bgc">
            <p class="label">
                <input class="cartId" type="checkbox" value="{$vo.id}" name="cart_id[]" lay-skin="primary"
                       lay-filter="cartId">
            </p>
            <p class="flex-center">
                <img src="{$vo.product.icon?:''}" alt="">
            </p>
            <div class="rgt">
                <p class="single">{$vo.product.title}</p>
                <!--                        <p class="spec single">施华洛世奇锆 海洋之心足银手链洋之心足银手链...</p>-->
                <div class="flex-layout">
                    <div class="priced">
                        ￥<span class="vip_price">{$vo.product.vip_price}</span>
                    </div>
                    <div class="stepper">

                        <p data-id="{$vo.id}" class="minus layui-icon layui-icon-subtraction"></p>
                        <input class="inpNum" type="number" value="{$vo.num}" readonly>
                        <p data-id="{$vo.id}" class="add  layui-icon layui-icon-addition"></p>
                    </div>
                </div>
            </div>
        </li>

        {/foreach}
    </ul>
    <div class="cart-footer flex-layout">
        <div class="left">
            <p class="label">
                <input type="checkbox" class="cartIdAll" lay-filter="cartIdAll" lay-skin="primary" title="全选">
            </p>
            <div class="sum">
                <p>总计<span class="">￥<span class="total">0.00</span></span></p>
            </div>
        </div>
        <div class="rgt flex-layout btn">立即结算</div>
        <ul class="submit-del">
            <li class="delete"> <div class=" flex-layout " style="    width: 6.125rem;
    height: 2.125rem;
    font-size: 0.875rem;
    color: var(--f5);
    justify-content: center;
    border-radius: 1.2rem;
    background: var(--rd);text-align: center">删除</div></li>
        </ul>
    </div>

</div>
{include file="public/menu" select="3" /}
</body>

{include file="public/footer"/}
<script>
    $(function () {
        const f = layui.form, ly = layer, a = $, b = a(".btn"), m = a('.minus'), d = a('.add'), o = a('.total'),
            i = '.item', l = '.layui-form-checked', vp = '.vip_price', nm = '.inpNum', ci = '.cartId',
            cl = '.cartIdAll', fo = 'checkbox(cartId)', fol = 'checkbox(cartIdAll)', ct = a(i).length,
            fn = 'cartForm', edit = '/index/cart/edit.html', api = '/index/cart/submit.html',
            rm = a('.delete');
        m.click(function () {
            const t = a(this), n = t.next(), v = parseInt(n.val()), p = t.parent().prev().children(vp).text(),
                c = t.parents(i).find(l).length, id = t.attr('data-id');
            if (v > 1) {
                a.post(edit, {type: 2, id: id}, function (d) {
                    if (d.code === 1) {
                        n.val(v > 1 ? v - 1 : 1);
                        if (c > 0) v > 1 ? o.text(parseFloat(o.text()) - parseFloat(p)) : '';
                    } else {
                        ly.msg(d.msg)
                    }
                })
            }
        });
        d.click(function () {
            var t = a(this), n = t.prev(), v = parseInt(n.val()), p = t.parent().prev().children(vp).text(),
                c = t.parents(i).find(l).length, id = t.attr('data-id');
            a.post(edit, {type: 1, id: id}, function (d) {
                if (d.code === 1) {
                    n.val(v + 1);
                    if (c > 0) o.text(parseFloat(o.text()) + parseFloat(p))
                } else {
                    ly.msg(d.msg)
                }
            })
        });
        rm.click(function () {
            if (!a.isEmptyObject(f.val(fn))) {
                var d = f.val(fn);
                d.type = 3;
                return common.request(edit, d);
            } else {
                ly.msg('请选择要删除的商品');
            }
        })

        f.on(fo, function (data) {
            sum(data.elem, data.elem.checked);
            a(i).find(l).length !== ct ? a(cl)[0].checked = false : a(cl)[0].checked = true;
            a(i).find(l).length <= 0 ? o.text('0.00') : '';
            f.render('checkbox');
        });
        f.on(fol, function (data) {
            a(ci).each(function () {
                this.checked = data.elem.checked
                sum(this, data.elem.checked)
            });
            f.render('checkbox');
        });

        sum = function (elem, checked) {
            const ve = a(elem).parents(i).find(vp), v = parseFloat(ve.text()),
                n = ve.parent().next().children(nm).val(), t = v * n;
            checked ? o.text(parseFloat(o.text()) + t) : o.text(parseFloat(o.text()) - t);
        }

        b.click(function () {

            return !a.isEmptyObject(f.val(fn)) ? common.request(api, f.val(fn)) : ly.msg('请选择要结算的商品');
        })
    })
    var type = 1
    $('.submit-del').hide()
    $('.edit').click(function () {
        if (type == 1) {
            $(this).html('完成')
            type = 2
            $('.sum').hide()
            $('.cart-footer .rgt').hide()
            $('.submit-del').show()
        } else {
            $(this).html('编辑')
            type = 1
            $('.sum').show()
            $('.cart-footer .rgt').show()
            $('.submit-del').hide()
        }
    })
</script>
</html>